<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>正则表达式.md | aiyoudiao</title>
    <meta name="generator" content="VuePress 1.9.10" />
    <link rel="icon" href="/img/blog.ico">
    <script src="https://cdn.jsdelivr.net/npm/live2d-widget@3.1.4/lib/L2Dwidget.min.js"></script> <meta name="description" content="码二~">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,gitee,markdown">
    <meta name="theme-color" content="#11a8cd">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <link rel="preload" href="/assets/css/0.styles.146197cf.css" as="style"><link rel="preload" href="/assets/js/app.bd2fbc77.js" as="script"><link rel="preload" href="/assets/js/3.72c9c947.js" as="script"><link rel="preload" href="/assets/js/106.b50e19b9.js" as="script"><link rel="preload" href="/assets/js/42.4251ca36.js" as="script"><link rel="prefetch" href="/assets/js/1.4ed4671d.js"><link rel="prefetch" href="/assets/js/10.bd6ddb58.js"><link rel="prefetch" href="/assets/js/100.20d2348f.js"><link rel="prefetch" href="/assets/js/101.ba7b784c.js"><link rel="prefetch" href="/assets/js/102.c3e2dcae.js"><link rel="prefetch" href="/assets/js/103.0f4c50f3.js"><link rel="prefetch" href="/assets/js/104.ef47a111.js"><link rel="prefetch" href="/assets/js/105.2e00f516.js"><link rel="prefetch" href="/assets/js/107.e125a8f6.js"><link rel="prefetch" href="/assets/js/108.770493ab.js"><link rel="prefetch" href="/assets/js/109.74766d7b.js"><link rel="prefetch" href="/assets/js/11.f786a5ee.js"><link rel="prefetch" href="/assets/js/110.0b0ee5b4.js"><link rel="prefetch" href="/assets/js/111.835b0e44.js"><link rel="prefetch" href="/assets/js/112.352fa217.js"><link rel="prefetch" href="/assets/js/113.4e908557.js"><link rel="prefetch" href="/assets/js/114.7b77996d.js"><link rel="prefetch" href="/assets/js/115.bdc61268.js"><link rel="prefetch" href="/assets/js/116.d5da9b8b.js"><link rel="prefetch" href="/assets/js/117.35ab1f9f.js"><link rel="prefetch" href="/assets/js/118.517c151d.js"><link rel="prefetch" href="/assets/js/119.f7f49ba8.js"><link rel="prefetch" href="/assets/js/12.3c729a65.js"><link rel="prefetch" href="/assets/js/120.b559598b.js"><link rel="prefetch" href="/assets/js/121.bf8a2f43.js"><link rel="prefetch" href="/assets/js/122.11a0bc97.js"><link rel="prefetch" href="/assets/js/123.2bafdde7.js"><link rel="prefetch" href="/assets/js/124.dc393688.js"><link rel="prefetch" href="/assets/js/125.ed3f389a.js"><link rel="prefetch" href="/assets/js/126.8fd9a57d.js"><link rel="prefetch" href="/assets/js/127.3bf2a1f2.js"><link rel="prefetch" href="/assets/js/128.b9c671d3.js"><link rel="prefetch" href="/assets/js/129.5d331f0d.js"><link rel="prefetch" href="/assets/js/13.7b1a1fe5.js"><link rel="prefetch" href="/assets/js/130.53e4f9c6.js"><link rel="prefetch" href="/assets/js/131.dcc47e1d.js"><link rel="prefetch" href="/assets/js/132.692dcdcd.js"><link rel="prefetch" href="/assets/js/133.e293202c.js"><link rel="prefetch" href="/assets/js/134.593dccf2.js"><link rel="prefetch" href="/assets/js/135.d76d384b.js"><link rel="prefetch" href="/assets/js/136.a519c23c.js"><link rel="prefetch" href="/assets/js/137.b1821288.js"><link rel="prefetch" href="/assets/js/138.5bcea4ef.js"><link rel="prefetch" href="/assets/js/139.076664b0.js"><link rel="prefetch" href="/assets/js/14.35f257b2.js"><link rel="prefetch" href="/assets/js/140.a019e655.js"><link rel="prefetch" href="/assets/js/141.1f70e1c7.js"><link rel="prefetch" href="/assets/js/142.5ed728fd.js"><link rel="prefetch" href="/assets/js/143.1c8cdc78.js"><link rel="prefetch" href="/assets/js/144.b0cb125b.js"><link rel="prefetch" href="/assets/js/145.c0209a76.js"><link rel="prefetch" href="/assets/js/146.551469f4.js"><link rel="prefetch" href="/assets/js/147.1dfd721d.js"><link rel="prefetch" href="/assets/js/148.91d07ef5.js"><link rel="prefetch" href="/assets/js/149.5b88b710.js"><link rel="prefetch" href="/assets/js/15.23bbc29a.js"><link rel="prefetch" href="/assets/js/150.8301107f.js"><link rel="prefetch" href="/assets/js/151.867da089.js"><link rel="prefetch" href="/assets/js/152.935d5046.js"><link rel="prefetch" href="/assets/js/153.f39d8435.js"><link rel="prefetch" href="/assets/js/154.6b9eb2c3.js"><link rel="prefetch" href="/assets/js/155.14283ad4.js"><link rel="prefetch" href="/assets/js/156.2d7c1a2a.js"><link rel="prefetch" href="/assets/js/157.2f28d02f.js"><link rel="prefetch" href="/assets/js/158.151221ae.js"><link rel="prefetch" href="/assets/js/159.ef6d7ffe.js"><link rel="prefetch" href="/assets/js/16.1793aef7.js"><link rel="prefetch" href="/assets/js/160.de54c4ea.js"><link rel="prefetch" href="/assets/js/161.24d4e57c.js"><link rel="prefetch" href="/assets/js/162.632032fe.js"><link rel="prefetch" href="/assets/js/163.fd01cd99.js"><link rel="prefetch" href="/assets/js/164.45f203f5.js"><link rel="prefetch" href="/assets/js/165.aafe4fe1.js"><link rel="prefetch" href="/assets/js/166.1dd1d21c.js"><link rel="prefetch" href="/assets/js/167.5501b3a1.js"><link rel="prefetch" href="/assets/js/168.fbe58b1f.js"><link rel="prefetch" href="/assets/js/169.2cae7f5e.js"><link rel="prefetch" href="/assets/js/17.bbfe63f2.js"><link rel="prefetch" href="/assets/js/170.265f7c9e.js"><link rel="prefetch" href="/assets/js/171.b61f327d.js"><link rel="prefetch" href="/assets/js/172.5d0043fd.js"><link rel="prefetch" href="/assets/js/173.45284bb6.js"><link rel="prefetch" href="/assets/js/174.9130e0c4.js"><link rel="prefetch" href="/assets/js/175.2b38bddd.js"><link rel="prefetch" href="/assets/js/176.9772cf09.js"><link rel="prefetch" href="/assets/js/177.69048ebc.js"><link rel="prefetch" href="/assets/js/178.e10d7ce5.js"><link rel="prefetch" href="/assets/js/179.3789edc0.js"><link rel="prefetch" href="/assets/js/18.0807ded0.js"><link rel="prefetch" href="/assets/js/180.ab675e47.js"><link rel="prefetch" href="/assets/js/181.2e39eff0.js"><link rel="prefetch" href="/assets/js/19.becf5a76.js"><link rel="prefetch" href="/assets/js/2.eb089a4f.js"><link rel="prefetch" href="/assets/js/20.cea59652.js"><link rel="prefetch" href="/assets/js/21.58c43ff1.js"><link rel="prefetch" href="/assets/js/22.f73b825d.js"><link rel="prefetch" href="/assets/js/23.43b13730.js"><link rel="prefetch" href="/assets/js/24.f77f93ca.js"><link rel="prefetch" href="/assets/js/25.7dfaf3fb.js"><link rel="prefetch" href="/assets/js/26.629d28e5.js"><link rel="prefetch" href="/assets/js/27.4fff23ea.js"><link rel="prefetch" href="/assets/js/28.1b8ae389.js"><link rel="prefetch" href="/assets/js/29.d5cce9a0.js"><link rel="prefetch" href="/assets/js/30.961d5519.js"><link rel="prefetch" href="/assets/js/31.121dd1af.js"><link rel="prefetch" href="/assets/js/32.4a3c5df7.js"><link rel="prefetch" href="/assets/js/33.5537f44b.js"><link rel="prefetch" href="/assets/js/34.1d4d4653.js"><link rel="prefetch" href="/assets/js/35.d094209b.js"><link rel="prefetch" href="/assets/js/36.832660c5.js"><link rel="prefetch" href="/assets/js/37.145c3665.js"><link rel="prefetch" href="/assets/js/38.4f369bfe.js"><link rel="prefetch" href="/assets/js/39.ba060044.js"><link rel="prefetch" href="/assets/js/4.66d742f6.js"><link rel="prefetch" href="/assets/js/40.e50e0379.js"><link rel="prefetch" href="/assets/js/41.4ed7617c.js"><link rel="prefetch" href="/assets/js/43.d22b74c4.js"><link rel="prefetch" href="/assets/js/44.59439f9d.js"><link rel="prefetch" href="/assets/js/45.da28bc46.js"><link rel="prefetch" href="/assets/js/46.b8db1176.js"><link rel="prefetch" href="/assets/js/47.7ed16fc7.js"><link rel="prefetch" href="/assets/js/48.c982d5ed.js"><link rel="prefetch" href="/assets/js/49.a7579f55.js"><link rel="prefetch" href="/assets/js/5.08802d7d.js"><link rel="prefetch" href="/assets/js/50.103b5bf6.js"><link rel="prefetch" href="/assets/js/51.0fe9d79a.js"><link rel="prefetch" href="/assets/js/52.9ba31e26.js"><link rel="prefetch" href="/assets/js/53.0e8bc1f0.js"><link rel="prefetch" href="/assets/js/54.9566e517.js"><link rel="prefetch" href="/assets/js/55.a124abae.js"><link rel="prefetch" href="/assets/js/56.d9cf0800.js"><link rel="prefetch" href="/assets/js/57.93599da0.js"><link rel="prefetch" href="/assets/js/58.d943f85b.js"><link rel="prefetch" href="/assets/js/59.50a66488.js"><link rel="prefetch" href="/assets/js/6.a3ea60eb.js"><link rel="prefetch" href="/assets/js/60.21aa3aa3.js"><link rel="prefetch" href="/assets/js/61.6712c00f.js"><link rel="prefetch" href="/assets/js/62.eff3e4b1.js"><link rel="prefetch" href="/assets/js/63.09701d5a.js"><link rel="prefetch" href="/assets/js/64.eb440dec.js"><link rel="prefetch" href="/assets/js/65.aeed0579.js"><link rel="prefetch" href="/assets/js/66.97244c64.js"><link rel="prefetch" href="/assets/js/67.e01c5c24.js"><link rel="prefetch" href="/assets/js/68.21be91ba.js"><link rel="prefetch" href="/assets/js/69.c0849905.js"><link rel="prefetch" href="/assets/js/7.7fd40e91.js"><link rel="prefetch" href="/assets/js/70.b32bbe5d.js"><link rel="prefetch" href="/assets/js/71.0efbc0c7.js"><link rel="prefetch" href="/assets/js/72.ef963181.js"><link rel="prefetch" href="/assets/js/73.ca7dd5db.js"><link rel="prefetch" href="/assets/js/74.4483ede8.js"><link rel="prefetch" href="/assets/js/75.374ab483.js"><link rel="prefetch" href="/assets/js/76.b4a39f08.js"><link rel="prefetch" href="/assets/js/77.6b30c3cd.js"><link rel="prefetch" href="/assets/js/78.15376c33.js"><link rel="prefetch" href="/assets/js/79.3153fcec.js"><link rel="prefetch" href="/assets/js/80.9a88c684.js"><link rel="prefetch" href="/assets/js/81.1e3f842c.js"><link rel="prefetch" href="/assets/js/82.996dbd3d.js"><link rel="prefetch" href="/assets/js/83.955158bf.js"><link rel="prefetch" href="/assets/js/84.71bdc76d.js"><link rel="prefetch" href="/assets/js/85.774e49f2.js"><link rel="prefetch" href="/assets/js/86.bebf32e5.js"><link rel="prefetch" href="/assets/js/87.becdbde1.js"><link rel="prefetch" href="/assets/js/88.49e933f4.js"><link rel="prefetch" href="/assets/js/89.eeceedfd.js"><link rel="prefetch" href="/assets/js/90.3ea6dd12.js"><link rel="prefetch" href="/assets/js/91.62a6a556.js"><link rel="prefetch" href="/assets/js/92.e2ebb8f5.js"><link rel="prefetch" href="/assets/js/93.dcdefe7a.js"><link rel="prefetch" href="/assets/js/94.bf412146.js"><link rel="prefetch" href="/assets/js/95.8deadcdc.js"><link rel="prefetch" href="/assets/js/96.9977087a.js"><link rel="prefetch" href="/assets/js/97.6591f9da.js"><link rel="prefetch" href="/assets/js/98.4db7f75e.js"><link rel="prefetch" href="/assets/js/99.a61462e9.js"><link rel="prefetch" href="/assets/js/vendors~docsearch.2852b102.js"> <link rel="stylesheet" href="/assets/css/0.styles.146197cf.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" width="50" height="50" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://p3-passport.byteacctimg.com/img/user-avatar/794fdae4ff249d532da19a3c26d420ed~300x300.image" alt="aiyoudiao" class="logo"> <span class="site-name can-hide">
      aiyoudiao
    </span></a> <div class="links"><div class="sky-switch" data-v-3a03d589><label for="toggle" data-v-3a03d589><input id="toggle" type="checkbox" data-v-3a03d589><div data-v-3a03d589></div></label></div> <div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="/img/mar.jpg"> <div class="blogger-info"><h3>码二</h3> <span>扫微信二维码，认识一下码二吧😉。</span></div></div> <nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="笔记" class="dropdown-title"><!----> <span class="title" style="display:;">笔记</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/84633490449/" class="nav-link">
  JavaScript
</a></li><li class="dropdown-item"><!----> <a href="/pages/2331001041/" class="nav-link">
  Vue
</a></li><li class="dropdown-item"><!----> <a href="/pages/18114480448/" class="nav-link">
  React
</a></li><li class="dropdown-item"><!----> <a href="/pages/25236260426/" class="nav-link">
  低代码
</a></li><li class="dropdown-item"><!----> <a href="/pages/35345230523/" class="nav-link">
  线性系统
</a></li><li class="dropdown-item"><!----> <a href="/pages/08313561056/" class="nav-link">
  暂未分类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="算法与设计" class="dropdown-title"><!----> <span class="title" style="display:;">算法与设计</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/70741550255/" class="nav-link">
  LeetCode
</a></li><li class="dropdown-item"><!----> <a href="/pages/17845450445/" class="nav-link">
  算法
</a></li><li class="dropdown-item"><!----> <a href="/pages/90132170217/" class="nav-link">
  数据结构
</a></li><li class="dropdown-item"><!----> <a href="/pages/50546120212/" class="nav-link">
  设计模式
</a></li><li class="dropdown-item"><!----> <a href="/pages/02344550255/" class="nav-link">
  Other
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="技能" class="dropdown-title"><!----> <span class="title" style="display:;">技能</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/82158160216/" class="nav-link">
  PMP
</a></li><li class="dropdown-item"><!----> <a href="/pages/41858590259/" class="nav-link">
  Office
</a></li><li class="dropdown-item"><!----> <a href="/pages/02359360236/" class="nav-link">
  面试
</a></li><li class="dropdown-item"><!----> <a href="/pages/73600130213/" class="nav-link">
  Bash
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="历程" class="dropdown-title"><!----> <span class="title" style="display:;">历程</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/83857320232/" class="nav-link">
  流年往事
</a></li><li class="dropdown-item"><!----> <a href="/pages/93419130213/" class="nav-link">
  经验片段
</a></li><li class="dropdown-item"><!----> <a href="/pages/99744220322/" class="nav-link">
  读书杂感
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="首页" class="dropdown-title"><!----> <span class="title" style="display:;">首页</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">
  归档
</a></li><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">
  分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">
  标签
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="其它" class="dropdown-title"><!----> <span class="title" style="display:;">其它</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/pages/02657130213/" class="nav-link">
  简介
</a></li><li class="dropdown-item"><!----> <a href="/pages/5390102042/" class="nav-link">
  收藏
</a></li><li class="dropdown-item"><!----> <a href="/pages/32309510451/" class="nav-link">
  有趣
</a></li><li class="dropdown-item"><!----> <a href="/pages/23313210521/" class="nav-link">
  文档
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>JavaScript</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/84633490449/" class="sidebar-link">实现一个vdom</a></li><li><a href="/pages/42534310431/" class="sidebar-link">前端路由监听</a></li><li><a href="/pages/8985100040/" class="sidebar-link">定制自己的代码片段</a></li><li><a href="/pages/70903450545/" class="sidebar-link">写一个下载文件功能</a></li><li><a href="/pages/00457481048/" aria-current="page" class="active sidebar-link">正则表达式</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/00457481048/#前言" class="sidebar-link">前言</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#正则概念" class="sidebar-link">正则概念</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#正则组成" class="sidebar-link">正则组成</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/00457481048/#常用元字符" class="sidebar-link">常用元字符</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#特殊元字符" class="sidebar-link">特殊元字符</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#普通元字符" class="sidebar-link">普通元字符</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#修饰符" class="sidebar-link">修饰符</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#正则使用" class="sidebar-link">正则使用</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/00457481048/#两种创建正则表达式的方式" class="sidebar-link">两种创建正则表达式的方式</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#匹配" class="sidebar-link">匹配</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#捕获" class="sidebar-link">捕获</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#正则技巧" class="sidebar-link">正则技巧</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/00457481048/#捕获的前提" class="sidebar-link">捕获的前提</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#实现一个匹配全部内容execall" class="sidebar-link">实现一个匹配全部内容execAll</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#test的捕获" class="sidebar-link">test的捕获</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#正则贪婪" class="sidebar-link">正则贪婪</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/00457481048/#正则匹配的贪婪性" class="sidebar-link">正则匹配的贪婪性</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#消除正则的贪婪性" class="sidebar-link">消除正则的贪婪性</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#在正则中的五种作用" class="sidebar-link">?在正则中的五种作用</a></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#字符串的replace" class="sidebar-link">字符串的replace</a></li></ul></li><li class="sidebar-sub-header"><a href="/pages/00457481048/#总结" class="sidebar-link">总结</a></li></ul></li><li><a href="/pages/26253370137/" class="sidebar-link">JS性能优化</a></li><li><a href="/pages/97717370337/" class="sidebar-link">JS性能优化进阶</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>vue</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>react</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>低代码</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>读书会</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>线性代数</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>docker</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>auto</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>杂记</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"> <div class="theme-vdoing-wrapper bg-style-1"><div class="articleInfo-wrap" data-v-18fb2c02><div class="articleInfo" data-v-18fb2c02><ul class="breadcrumbs" data-v-18fb2c02><li data-v-18fb2c02><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-18fb2c02></a></li> <li data-v-18fb2c02><a href="/categories/?category=%E7%AC%94%E8%AE%B0" title="分类" data-v-18fb2c02>
          笔记
        </a></li> <li data-v-18fb2c02><a href="/categories/?category=JavaScript" title="分类" data-v-18fb2c02>
          JavaScript
        </a></li> <!----></ul> <div class="info" data-v-18fb2c02><div title="作者" class="author iconfont icon-touxiang" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>aiyoudiao</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-18fb2c02><a href="javascript:;" data-v-18fb2c02>2022-10-16</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><!----> <span>
            正则表达式.md
          </span></h1> <div class="theme-vdoing-content content__default"><h2 id="前言"><a href="#前言" class="header-anchor">#</a> 前言</h2> <p>爬虫是<strong>非常的</strong>的强大，相信不少朋友都有所耳闻，它帮助我们更快地“获得”我们所要关键数据。那么，它怎么知道我们要需要什么内容？它又是如何工作的？在这篇文章里，我们一起来看看。</p> <h2 id="正则概念"><a href="#正则概念" class="header-anchor">#</a> 正则概念</h2> <p><strong>RegExp</strong> 它是用于处理字符串的规则对象，用于<code>匹配</code>(test)和<code>捕获</code>(exec|match)。</p> <blockquote><p>注意，“<strong>匹配</strong>”得到的值为(true|false)，而“<strong>捕获</strong>”得到的值是data。</p></blockquote> <h2 id="正则组成"><a href="#正则组成" class="header-anchor">#</a> 正则组成</h2> <ul><li>元字符：常用元字符、特殊元字符、普通元字符</li> <li>修饰符：i m g</li></ul> <h3 id="常用元字符"><a href="#常用元字符" class="header-anchor">#</a> 常用元字符</h3> <table><thead><tr><th>符号</th> <th>语义</th> <th>含义</th></tr></thead> <tbody><tr><td>*</td> <td>0-N</td> <td>0 至 任意</td></tr> <tr><td>+</td> <td>1-N</td> <td>1 至 任意</td></tr> <tr><td>？</td> <td>0-1</td> <td>0 或者 1</td></tr> <tr><td>{n}</td> <td>N</td> <td>指定为 N 个</td></tr> <tr><td>{n, m}</td> <td>N-M</td> <td>指定为 N 至 M个</td></tr> <tr><td>{n,}</td> <td>N-任意</td> <td>指定为 N 至 任意个</td></tr></tbody></table> <h3 id="特殊元字符"><a href="#特殊元字符" class="header-anchor">#</a> 特殊元字符</h3> <table><thead><tr><th>符号</th> <th>语义</th> <th>含义</th></tr></thead> <tbody><tr><td>\</td> <td>转义</td> <td>普通字符-&gt;特殊字符-&gt;普通字符串</td></tr> <tr><td>.</td> <td>除 换行符 之外的任意普通字符</td> <td>匹配 非\n之外的所有普通字符</td></tr> <tr><td>^</td> <td>起始字符</td> <td>以哪个元字符为起始</td></tr> <tr><td>$</td> <td>结束字符</td> <td>以哪个元字符为结束</td></tr> <tr><td>\n</td> <td>换行符</td> <td>换行</td></tr> <tr><td>\d</td> <td>0-9</td> <td>任意数字</td></tr> <tr><td>\D</td> <td>非0-9</td> <td>非任意数字</td></tr> <tr><td>\s</td> <td>空白符</td> <td>空格符、制表符、换页符等</td></tr> <tr><td>\S</td> <td>非空白符</td> <td>非空格符、制表符、换页符等</td></tr> <tr><td>\w</td> <td>0-9 a-Z _</td> <td>0-9 a-Z _ 中任意一个</td></tr> <tr><td>\W</td> <td>非 0-9 a-Z _</td> <td>不为 0-9 a-Z _中任意一个</td></tr> <tr><td>\t</td> <td>制表符</td> <td>tab键：四个空格</td></tr> <tr><td></td> <td></td> <td>或</td></tr> <tr><td>[]</td> <td>其中</td> <td>[xyz] 表示 x y z 中任意一个字符</td></tr> <tr><td>[^]</td> <td>非其中</td> <td>[^xyz] 表示 非 x y z 中任意一个字符</td></tr> <tr><td>[a-z]</td> <td>其中范围</td> <td>[a-z] 表示 a到z中任意一个字符，还可以0-9 a-Z</td></tr> <tr><td>[^a-z]</td> <td>非其中范围</td> <td>[^a-z] 表示非 a到z中任意一个字符</td></tr> <tr><td>()</td> <td>分组</td> <td>分组符号</td></tr> <tr><td>(?😃</td> <td>只匹配不捕获</td> <td>过滤表达式中的分组内容，只匹配:后面的内容，不保留该分组</td></tr> <tr><td>\1</td> <td>分组回溯</td> <td>回溯上一个分组匹配到的占位内容</td></tr> <tr><td>(?=)</td> <td>正向预查(右)</td> <td>分组中 = 后面的内容	必须在<code>)</code>右边</td></tr> <tr><td>(?!)</td> <td>负向预查(右)</td> <td>分组中 ! 后面的内容 必须不在<code>)</code>右边</td></tr> <tr><td>(?&lt;=)</td> <td>正向预查(左)</td> <td>分组中 &lt;= 后面的内容 必须在<code>(</code>左边</td></tr> <tr><td>(?&lt;!)</td> <td>负向预查(左)</td> <td>分组中 &lt;! 后面的内容 必须不在<code>(</code>左边</td></tr></tbody></table> <h3 id="普通元字符"><a href="#普通元字符" class="header-anchor">#</a> 普通元字符</h3> <table><thead><tr><th>符号</th> <th>语义</th> <th>含义</th></tr></thead> <tbody><tr><td>abcd</td> <td>字符串abcd</td> <td>常见的普通字符串</td></tr></tbody></table> <h3 id="修饰符"><a href="#修饰符" class="header-anchor">#</a> 修饰符</h3> <div class="language-js extra-class"><pre class="language-js"><code>console<span class="token punctuation">.</span><span class="token function">dir</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">)</span> <span class="token comment">// 去控制台看它的原型</span>
</code></pre></div><p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ad0a568bdbfc410088136fee59d356d0~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <table><thead><tr><th>符号</th> <th>语义</th> <th>含义</th> <th>使用</th></tr></thead> <tbody><tr><td>i</td> <td>ignoreCase</td> <td>忽略大小写</td> <td>/T/i.test('test') // true</td></tr> <tr><td>m</td> <td>multiline</td> <td>匹配多行</td> <td>/t/m.test('e \r\n t') // true</td></tr> <tr><td>g</td> <td>global</td> <td>全局匹配</td> <td>/T/g.test('tes\r\nT') // true</td></tr></tbody></table> <h2 id="正则使用"><a href="#正则使用" class="header-anchor">#</a> 正则使用</h2> <h3 id="两种创建正则表达式的方式"><a href="#两种创建正则表达式的方式" class="header-anchor">#</a> 两种创建正则表达式的方式</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1</span><span class="token regex-delimiter">/</span><span class="token regex-flags">img</span></span> <span class="token comment">// /1/gim</span>
<span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;img&quot;</span><span class="token punctuation">)</span> <span class="token comment">// /1/gim</span>

<span class="token operator">/</span>\d<span class="token operator">/</span>img <span class="token comment">// /\d/img</span>
<span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;\\d&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;img&quot;</span><span class="token punctuation">)</span> <span class="token comment">// /\d/gim</span>
</code></pre></div><blockquote><p>正则表达式中的元字符需要由<code>字符串变量</code>拼接而成时，就不要使用字面量<code>/1/img</code>的方式，可以使用 <code>new RegExp(&quot;1&quot;, 'img')</code>的方式。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token string">&quot;abc&quot;</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token string">&quot;efg&quot;</span>
<span class="token comment">// 元字符需要由`字符串变量`拼接而成的</span>
<span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>a <span class="token operator">+</span> b<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abcefg'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token comment">// !不要使用这种方式哟</span>
<span class="token operator">/</span>ab<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&quot;abcefg&quot;</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
</code></pre></div><h3 id="匹配"><a href="#匹配" class="header-anchor">#</a> 匹配</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">1</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'1234567'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token operator">/</span><span class="token punctuation">[</span><span class="token number">0</span><span class="token operator">-</span><span class="token number">9</span><span class="token punctuation">]</span><span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'1234567'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>

<span class="token operator">/</span><span class="token punctuation">[</span>a<span class="token operator">-</span>z<span class="token punctuation">]</span><span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'abcd'</span><span class="token punctuation">)</span> <span class="token comment">// true</span>


<span class="token operator">/</span><span class="token punctuation">.</span><span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">&quot;\n&quot;</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
<span class="token operator">/</span><span class="token punctuation">.</span><span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span><span class="token comment">// true</span>

<span class="token operator">/</span><span class="token operator">^</span>19$<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'19'</span><span class="token punctuation">)</span><span class="token comment">// true</span>
<span class="token operator">/</span><span class="token operator">^</span>19$<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'619'</span><span class="token punctuation">)</span><span class="token comment">// false</span>
<span class="token operator">/</span><span class="token operator">^</span>19$<span class="token operator">/</span><span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'196'</span><span class="token punctuation">)</span><span class="token comment">// false</span>
</code></pre></div><h3 id="捕获"><a href="#捕获" class="header-anchor">#</a> 捕获</h3> <div class="language- extra-class"><pre class="language-text"><code>/1/.exec('123132') // [&quot;1&quot;, index: 0, input: &quot;123132&quot;, groups: undefined]


// 匹配身份证：前六位 省市县、中间八位年月日、最后四位：前两位是所在地公安局编码，倒数第二位 奇男偶女，倒数第一位是0-9 或者 x，x表示的是10。
let reg = /^(\d{6})(\d{4})(\d{2})(\d{2})\d{2}(\d)(\d|x)$/
reg.exec('421126199607171957') 
// [&quot;421126199607171957&quot;, &quot;421126&quot;, &quot;1996&quot;, &quot;07&quot;, &quot;17&quot;, &quot;5&quot;, &quot;7&quot;, index: 0, input: &quot;421126199607171957&quot;, groups: undefined]

</code></pre></div><h2 id="正则技巧"><a href="#正则技巧" class="header-anchor">#</a> 正则技巧</h2> <p>正则RegExp.prototype上的 test 和 exec 都能完成实现捕获。<br>
字符串String.prototyp 上的 replace、match、split 也能实现捕获。</p> <h3 id="捕获的前提"><a href="#捕获的前提" class="header-anchor">#</a> 捕获的前提</h3> <p>正则和字符串要进行匹配，如果不匹配，捕获的结果就为null</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;test2019test2020test2021&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span>lastIndex<span class="token punctuation">)</span> <span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;2019&quot;, index: 4, input: &quot;test2019test2020test2021&quot;, groups: undefined]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span>lastIndex<span class="token punctuation">)</span> <span class="token comment">// 0</span>

<span class="token comment">// 基于exec实现的正则捕获</span>
<span class="token comment">// 1. 捕获到的结果为null 或者为一个数组</span>
<span class="token comment">// 2. 为数组时</span>
<span class="token comment">// 		-  第一项： 本次捕获到的内容</span>
<span class="token comment">// 		- 其余项： 对于小分组本次单独捕获的内容</span>
<span class="token comment">//		- index:  当前捕获内容在字符串中的起始索引</span>
<span class="token comment">//		- input:  原始字符串</span>
<span class="token comment">// 3. 每次执行exec只能捕获一个符合正则规则的，那么默认情况下执行一百遍，获取到的结果都是一样的</span>
<span class="token comment">//		- 正则捕获的懒惰性：默认捕获第一个</span>
<span class="token comment">// 4. reg.lastIndex 当前正则的下一次匹配的起始索引位置 </span>
<span class="token comment">//		- 惰性捕获的原因：默认情况下lastIndex的值不会被修改，每一次都是从字符串的开始位置找，于是找到的永远只是第一个，默认情况下lastIndex是只读的，`无法修改`</span>


reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span>lastIndex<span class="token punctuation">)</span><span class="token comment">// 0</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">// [&quot;2019&quot;, index: 4, input: &quot;test2019test2020test2021&quot;, groups: undefined]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span>lastIndex<span class="token punctuation">)</span><span class="token comment">// 8</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token comment">// [&quot;2020&quot;, index: 12, input: &quot;test2019test2020test2021&quot;, groups: undefined]</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span>lastIndex<span class="token punctuation">)</span><span class="token comment">// 16</span>

<span class="token comment">//  5. 使用全局匹配时，就能消除正则捕获的懒惰行了，所以解决方法就是全局匹配符·`g`</span>
<span class="token comment">// 		- 全部都捕获到之后，再匹配会返回null，并且lastIndex还会重置为0。</span>
<span class="token comment">//      - 这就会形成了一个循环，再匹配就是重新开始匹配了。</span>
</code></pre></div><h3 id="实现一个匹配全部内容execall"><a href="#实现一个匹配全部内容execall" class="header-anchor">#</a> 实现一个匹配全部内容execAll</h3> <p>通过exec方法加全局匹配符g来实现execAll。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token operator">~</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">execAll</span> <span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span><span class="token keyword">this</span><span class="token punctuation">.</span>global<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span><span class="token string">'未使用全局匹配符 g，只能匹配第一个'</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token keyword">let</span> current <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span>current<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      result<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>current<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
      current <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
    
    <span class="token keyword">return</span> result<span class="token punctuation">.</span>length <span class="token operator">?</span> <span class="token keyword">null</span> <span class="token operator">:</span> result
  <span class="token punctuation">}</span>
  <span class="token class-name">RegExp</span><span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>execAll <span class="token operator">=</span> execAll
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;test2019test2020test2021&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
reg<span class="token punctuation">.</span><span class="token function">execAll</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span> <span class="token comment">// [&quot;2019&quot;, &quot;2020&quot;, &quot;2021&quot;]</span>

</code></pre></div><p>字符串的match方法等价楼上实现的execAll，并且execAll的实现也是模仿字符串的match来实现的，必须配合全局修饰符<code>g</code>来使用。</p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;test2019test2020test2021&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span>  <span class="token comment">// [&quot;2019&quot;, &quot;2020&quot;, &quot;2021&quot;]</span>
str<span class="token punctuation">.</span><span class="token function">matchAll</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span> <span class="token comment">// 返回的是一个迭代器，迭代器中的每一次next()的结果是每一次reg.exec的结果，并且必须配合修饰符g来使用。</span>
</code></pre></div><h3 id="test的捕获"><a href="#test的捕获" class="header-anchor">#</a> test的捕获</h3> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">'{2021}年{4}月{5}日'</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\{(\d+)\}</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">)</span> <span class="token comment">// 2021</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">)</span> <span class="token comment">// 4</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">)</span> <span class="token comment">// 5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// false</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">)</span> <span class="token comment">// 5</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>reg<span class="token punctuation">.</span><span class="token function">test</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// true</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>RegExp<span class="token punctuation">.</span>$1<span class="token punctuation">)</span> <span class="token comment">// 2021</span>
</code></pre></div><p><strong>test 捕获注意</strong></p> <p>和exec一样，test也能实现捕获，只不过它是通过Reg.Exp.$1等等特殊变量来获取每次匹配到的内容，<code>$1</code>表示第一个分组中的内容，<code>RegExp.$1 - RegExp.$9</code>获取当前本次正则匹配后，第一个到第九个分组的信息。
。如果没有分组的话，就如下图所示，通过<code>$&amp;</code> 或者<code>lastMatch</code>来获取匹配到的内容。</p> <p><img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b43217be3ec466dac8249837cb51bbf~tplv-k3u1fbpfcp-zoom-1.image" alt=""></p> <h2 id="正则贪婪"><a href="#正则贪婪" class="header-anchor">#</a> 正则贪婪</h2> <blockquote><p>正则又懒惰又贪婪，懒惰用 <code>g</code>，贪婪用<code>?</code></p></blockquote> <h3 id="正则匹配的贪婪性"><a href="#正则匹配的贪婪性" class="header-anchor">#</a> 正则匹配的贪婪性</h3> <blockquote><p>使用 <code>+</code> 等量词 ，默认情况下，正则捕获的时候，获取的是按照当前正则所匹配的最长结果。</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;test2019test2020test2021&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;2019&quot;, &quot;2020&quot;, &quot;2021&quot;]</span>
</code></pre></div><h3 id="消除正则的贪婪性"><a href="#消除正则的贪婪性" class="header-anchor">#</a> 消除正则的贪婪性</h3> <blockquote><p>在量词后面使用 <code>?</code> ，正则捕获时，获取的是按照当前正则所匹配的最短结果</p></blockquote> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;test2019test2020test2021&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+?</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">//  [&quot;2&quot;, &quot;0&quot;, &quot;1&quot;, &quot;9&quot;, &quot;2&quot;, &quot;0&quot;, &quot;2&quot;, &quot;0&quot;, &quot;2&quot;, &quot;0&quot;, &quot;2&quot;, &quot;1&quot;]</span>
</code></pre></div><h3 id="在正则中的五种作用"><a href="#在正则中的五种作用" class="header-anchor">#</a> ?在正则中的五种作用</h3> <ul><li>问号左边是非量词元字符：本身代表量词元字符，左边的字符要出现 0 至 1 次</li> <li>问号左边是量词元字符：取消捕获时候的贪婪性</li> <li>(?😃：只匹配不捕获</li> <li>(?=)：正向预查 (只匹配不捕获)，必须条件符合</li> <li>(?!)：负向预查 (只匹配不捕获)，必须条件不符合</li></ul> <p>留一篇<a href="https://mp.weixin.qq.com/s/eutSdSt5R-D09DXMJZaQ4A" target="_blank" rel="noopener noreferrer">可还行的参考链接<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <h3 id="字符串的replace"><a href="#字符串的replace" class="header-anchor">#</a> 字符串的replace</h3> <p><strong>全部替换</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;test2019test2020test2021&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">test</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token string">'测试'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 测试2019测试2020测试2021</span>
</code></pre></div><p><strong>替换时使用反向引用</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;2021-04-05&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(\d{4})-(\d{1,2})-(\d{1,2})$</span><span class="token regex-delimiter">/</span></span>

str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token string">'$1年$2月$3日'</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token string">'$1年$2月$3日'</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 2021年04月05日</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'args'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span>  <span class="token comment">//  [&quot;2021-04-05&quot;, &quot;2021&quot;, &quot;04&quot;, &quot;05&quot;, 0, &quot;2021-04-05&quot;]</span>
  <span class="token keyword">const</span> <span class="token punctuation">[</span>big <span class="token punctuation">,</span> $1<span class="token punctuation">,</span> $2<span class="token punctuation">,</span> $3<span class="token punctuation">]</span> <span class="token operator">=</span> args
   
  <span class="token keyword">return</span> $1 <span class="token operator">+</span> <span class="token string">'年'</span> <span class="token operator">+</span> $2 <span class="token operator">+</span> <span class="token string">'月'</span> <span class="token operator">+</span> $3 <span class="token operator">+</span> <span class="token string">'日'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 2021年04月05日</span>


<span class="token comment">// 看下面replace方法，实际上和exec的返回结果几乎一样</span>
<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;2021-04-05&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">^(\d{4})-(\d{1,2})-(\d{1,2})$</span><span class="token regex-delimiter">/</span></span>
str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'args'</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span> <span class="token comment">//  [&quot;2021-04-05&quot;, &quot;2021&quot;, &quot;04&quot;, &quot;05&quot;, 0, &quot;2021-04-05&quot;]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>str<span class="token punctuation">)</span> <span class="token comment">// [&quot;2021-04-05&quot;, &quot;2021&quot;, &quot;04&quot;, &quot;05&quot;, index: 0, input: &quot;2021-04-05&quot;, groups: undefined]</span>

</code></pre></div><p><strong>首字符大写</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;what are you how are you who are you&quot;</span>
<span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\b([a-zA-Z])[a-zA-Z]*\b</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span>args</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> <span class="token punctuation">[</span>big<span class="token punctuation">,</span> $1<span class="token punctuation">]</span> <span class="token operator">=</span> args
  $1 <span class="token operator">=</span> $1<span class="token punctuation">.</span><span class="token function">toUpperCase</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  big <span class="token operator">=</span> big<span class="token punctuation">.</span><span class="token function">substring</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
  <span class="token keyword">return</span> $1<span class="token operator">+</span> big
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// What Are You How Are You Who Are You</span>
</code></pre></div><p><strong>获取字符串中出现次数最多的字符</strong></p> <div class="language-js extra-class"><pre class="language-js"><code><span class="token punctuation">{</span>
  <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;whatareyouhowareyouwhoareyou&quot;</span>
  <span class="token comment">// 分割再排序和重组</span>
  str <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token comment">// &quot;aaaaeeehhhooooorrrtuuuwwwyyy&quot;</span>
  <span class="token comment">// 会匹配出现连续1次以上的字符，默认贪婪模式</span>
  <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">([a-zA-Z])\1+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span>
  <span class="token keyword">let</span> result <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span>reg<span class="token punctuation">)</span> <span class="token comment">// [&quot;aaaa&quot;, &quot;eee&quot;, &quot;hhh&quot;, &quot;ooooo&quot;, &quot;rrr&quot;, &quot;uuu&quot;, &quot;www&quot;, &quot;yyy&quot;]</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> b<span class="token punctuation">.</span>length <span class="token operator">-</span> a<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// [&quot;ooooo&quot;, &quot;aaaa&quot;, &quot;eee&quot;, &quot;hhh&quot;, &quot;rrr&quot;, &quot;uuu&quot;, &quot;www&quot;, &quot;yyy&quot;]</span>
<span class="token punctuation">}</span>

<span class="token punctuation">{</span>
  <span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;whatareyouhowareyouwhoareyou&quot;</span>
  <span class="token comment">// 分割再排序和重组</span>
  str <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> a<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">&quot;&quot;</span><span class="token punctuation">)</span> <span class="token comment">// &quot;aaaaeeehhhooooorrrtuuuwwwyyy&quot;</span>
  <span class="token keyword">let</span> max <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">,</span>res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">,</span> flag <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
  <span class="token comment">// 自定义排序，从最大找到最小</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> i <span class="token operator">=</span> str<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">;</span> i <span class="token operator">--</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> reg <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token string">&quot;([a-zA-Z])\\1{&quot;</span><span class="token operator">+</span><span class="token punctuation">(</span>i<span class="token operator">-</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token operator">+</span><span class="token string">&quot;}&quot;</span><span class="token punctuation">,</span> <span class="token string">'g'</span><span class="token punctuation">)</span>
      str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>reg<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> $1</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>$1<span class="token punctuation">)</span>
          max <span class="token operator">=</span> i
          flag <span class="token operator">=</span> <span class="token boolean">true</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>flag<span class="token punctuation">)</span> <span class="token keyword">break</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'出现次数最多的字符是 '</span><span class="token operator">+</span> res<span class="token punctuation">,</span> <span class="token string">'出现次数是'</span> <span class="token operator">+</span> max<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

</code></pre></div><p><strong>时间字符格式化</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>
<span class="token operator">~</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// formatTime: 时间字符串的格式化</span>
  <span class="token keyword">function</span> <span class="token function">formatTime</span> <span class="token punctuation">(</span><span class="token parameter">template</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 首先获取时间字符串中的年月日等信息</span>
    <span class="token keyword">let</span> timeAry <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">match</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d+</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">)</span>
    template <span class="token operator">=</span> template <span class="token operator">||</span> <span class="token string">&quot;{0}年{1}月{2}日 {3}时{4}分{5}秒&quot;</span>
    template <span class="token operator">=</span> template<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\{(\d+)\}</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter">content<span class="token punctuation">,</span> $1</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> time <span class="token operator">=</span> timeAry<span class="token punctuation">[</span>$1<span class="token punctuation">]</span> <span class="token operator">||</span> <span class="token string">&quot;00&quot;</span>
      time<span class="token punctuation">.</span>length <span class="token operator">&lt;</span> <span class="token number">2</span> <span class="token operator">?</span> time <span class="token operator">=</span> <span class="token string">&quot;0&quot;</span> <span class="token operator">+</span> time <span class="token operator">:</span> <span class="token keyword">null</span>
      <span class="token keyword">return</span> time
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    
    <span class="token keyword">return</span> template
  <span class="token punctuation">}</span>
  
  <span class="token keyword">function</span> <span class="token function">queryURLParams</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
  
  <span class="token comment">// 扩展到内置类 String.prototype上，这种方式是循环往原型上扩展方法</span>
  <span class="token punctuation">[</span><span class="token string">&quot;formatTime&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;queryURLParams&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// String.prototype[&quot;formatTime&quot;] = eval(&quot;formatTime&quot;);</span>
    <span class="token class-name">String</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">eval</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;2021-04-05 23:36:2&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">formatTime</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 2021年04月05日 23时36分02秒</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">formatTime</span><span class="token punctuation">(</span><span class="token string">&quot;{1}月{2}日&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 04月05日</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">formatTime</span><span class="token punctuation">(</span><span class="token string">&quot;{1}/{2} {3}:{4}&quot;</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 04/05 23:36</span>
</code></pre></div><p><strong>URL参数格式化</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>
<span class="token operator">~</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">formatTime</span> <span class="token punctuation">(</span><span class="token parameter">template</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
  
  <span class="token comment">// URL参数格式化</span>
  <span class="token keyword">function</span> <span class="token function">queryURLParams</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">([^?=&amp;#]+)=([^?=&amp;#]+)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span><span class="token punctuation">[</span><span class="token punctuation">,</span> $1<span class="token punctuation">,</span> $2<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      	obj<span class="token punctuation">[</span>$1<span class="token punctuation">]</span> <span class="token operator">=</span> $2
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">#([^?=&amp;#]+)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token parameter"><span class="token operator">...</span><span class="token punctuation">[</span><span class="token punctuation">,</span> $1<span class="token punctuation">]</span></span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      obj<span class="token punctuation">[</span><span class="token string">'HASH'</span><span class="token punctuation">]</span> <span class="token operator">=</span> $1
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
    
    
    <span class="token keyword">return</span> obj
  <span class="token punctuation">}</span>
  
  <span class="token comment">// 扩展到内置类 String.prototype上，这种方式是循环往原型上扩展方法</span>
  <span class="token punctuation">[</span><span class="token string">&quot;formatTime&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;queryURLParams&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// String.prototype[&quot;formatTime&quot;] = eval(&quot;formatTime&quot;);</span>
    <span class="token class-name">String</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">eval</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;http://www.hao6.website:888/?id=999&amp;name=zs#video&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">queryURLParams</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// {id: &quot;999&quot;, name: &quot;zs&quot;, HASH: &quot;video&quot;}</span>
</code></pre></div><p><strong>大数字千分位格式化</strong></p> <div class="language-js extra-class"><pre class="language-js"><code>
<span class="token operator">~</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> <span class="token function">formatTime</span> <span class="token punctuation">(</span><span class="token parameter">template</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
  
  <span class="token keyword">function</span> <span class="token function">queryURLParams</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token punctuation">}</span>
  
  <span class="token keyword">function</span> <span class="token function">millimeter</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">let</span> result <span class="token operator">=</span> <span class="token string">''</span>
      result <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\d{1,3}(?=(\d{3})+$)</span><span class="token regex-delimiter">/</span><span class="token regex-flags">g</span></span><span class="token punctuation">,</span> <span class="token parameter">content</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> content <span class="token operator">+</span> <span class="token string">','</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>

      <span class="token keyword">return</span> result
  <span class="token punctuation">}</span>
  
  <span class="token comment">// 扩展到内置类 String.prototype上，这种方式是循环往原型上扩展方法</span>
  <span class="token punctuation">[</span><span class="token string">&quot;formatTime&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;queryURLParams&quot;</span><span class="token punctuation">,</span> <span class="token string">&quot;millimeter&quot;</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// String.prototype[&quot;formatTime&quot;] = eval(&quot;formatTime&quot;);</span>
    <span class="token class-name">String</span><span class="token punctuation">.</span>prototype<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">eval</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

<span class="token keyword">let</span> str <span class="token operator">=</span> <span class="token string">&quot;1234193949&quot;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>str<span class="token punctuation">.</span><span class="token function">millimeter</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment">// 1,234,193,949</span>
</code></pre></div><h2 id="总结"><a href="#总结" class="header-anchor">#</a> 总结</h2> <p>通过网络请求获取你想要的内容字符串，然后通过以上讲述的正则技巧来捕获你需要的那内容，之后保存起来，需要用的时候，再读取、运算，最后经过自定义的筛选，最终渲染出你想要的结果。</p> <p>后面有空再补点内容。</p></div></div> <div class="page-edit"><!----> <div class="tags"><a href="/tags/?tag=JavaScript" title="标签">#JavaScript</a><a href="/tags/?tag=%E6%AD%A3%E5%88%99" title="标签">#正则</a></div> <div class="last-updated"><span class="prefix">上次更新时间:</span> <span class="time">10年18月2023日 01时57分53秒</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/70903450545/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">写一个下载文件功能</div></a> <a href="/pages/26253370137/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">JS性能优化</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/70903450545/" class="prev">写一个下载文件功能</a></span> <span class="next"><a href="/pages/26253370137/"> JS性能优化 </a>
        →
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/45343271027/"><div>01.数据结构导论一览.md</div></a> <span>10-16</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/38850370637/"><div>30.2023年06月04日.md</div></a> <span>06-04</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/74707370537/"><div>08.与测量相关.md</div></a> <span>05-06</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div> </main></div> <div class="footer"><!----> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2017-2023
    <span class="link">aiyoudiao 码二</span> <span>备案号：</span> <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank" title="备案号">鄂ICP备2022002654号-1</a></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div></div> <!----> <!----> <!----></div><div class="global-ui"><div></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="list" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer><div id="VuepressPluginLive2d"></div></div></div>
    <script src="/assets/js/app.bd2fbc77.js" defer></script><script src="/assets/js/3.72c9c947.js" defer></script><script src="/assets/js/106.b50e19b9.js" defer></script><script src="/assets/js/42.4251ca36.js" defer></script>
  </body>
</html>
